<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="poachedegg"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  var chartDom = document.getElementById("poachedegg");
  var myChart = echarts.init(chartDom);

  const stateData = {
    xAxisData: ["5号", "10号", "15号", "20号", "25号", "30号"],
    materialData: [10, 35, 40, 32, 40, 34], // 曲线1：料
    eggData: [20, 28, 39, 22, 15, 27], // 曲线2：蛋
  };

  var option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["料", "蛋"],
      textStyle: {
        fontSize: 14,
        fontFamily: "PingFangSC, PingFang SC",
        fontWeight: 400,
        color:'#fff'
      },
    },
    grid: {
      top: "18%",
      left: "5%",
      right: "5%",
      bottom: "25%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: stateData.xAxisData,
      axisLabel: {
        fontSize: 14,
        fontFamily: "PingFangSC, PingFang SC",
        fontWeight: 400,
        color: "#b6babf",
        formatter: "{value}",
      },
    },
    yAxis: {
      type: "value",
      name: "单位：万",
      nameTextStyle: {
        fontSize: 14,
        fontFamily: "PingFangSC, PingFang SC",
        fontWeight: 400,
      },
      axisLabel: {
        fontSize: 14,
        fontFamily: "PingFangSC, PingFang SC",
        fontWeight: 400,
        color: "#b6babf",
      },
    },
    series: [
      {
        name: "料",
        type: "line",
        smooth: true,
        data: stateData.materialData,
        lineStyle: {
          color: "rgba(255, 116, 133, 1)",
          width: 2,
        },
        itemStyle: {
          color: "rgba(255, 116, 133, 1)",
        },
      },
      {
        name: "蛋",
        type: "line",
        smooth: true,
        data: stateData.eggData,
        lineStyle: {
          color: "rgba(95, 175, 255, 1)",
          width: 2,
        },
        itemStyle: {
          color: "rgba(95, 175, 255, 1)",
        },
      },
    ],
  };

  myChart.setOption(option);

  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style scoped>
#poachedegg {
  width: 100%;
  height: 100%;
}
</style>